<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审核管理 - 沥青运输管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .feature-card {
            transition: transform 0.2s, box-shadow 0.2s;
            height: 100%;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,.2);
        }
        .card-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .disabled-link {
            cursor: not-allowed;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/">
                                <span data-feather="home"></span>
                                仪表板
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/review/">
                                <span data-feather="check-circle"></span>
                                审核管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled-link" href="#" onclick="alert('该功能暂未开放'); return false;">
                                <span data-feather="users"></span>
                                用户管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled-link" href="#" onclick="alert('该功能暂未开放'); return false;">
                                <span data-feather="truck"></span>
                                车辆管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled-link" href="#" onclick="alert('该功能暂未开放'); return false;">
                                <span data-feather="package"></span>
                                订单管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/profile/">
                                <span data-feather="user"></span>
                                个人中心
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">审核管理</h1>
                </div>

                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <h4 class="alert-heading">审核管理说明</h4>
                            <p>在此模块中，您可以管理用户和车辆的资质审核。系统会自动收集用户和车辆的资质信息，并生成待审核记录。</p>
                            <hr>
                            <p class="mb-0">请定期检查待审核列表，及时处理用户和车辆的资质申请，以确保平台的正常运营。</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card feature-card">
                            <div class="card-body text-center">
                                <div class="card-icon text-primary">
                                    <span data-feather="clock"></span>
                                </div>
                                <h5 class="card-title">待审核列表</h5>
                                <p class="card-text">查看并处理待审核的用户和车辆资质申请，确保及时响应用户需求。</p>
                                <a href="/review/list/" class="btn btn-primary">前往处理</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card feature-card">
                            <div class="card-body text-center">
                                <div class="card-icon text-secondary">
                                    <span data-feather="book"></span>
                                </div>
                                <h5 class="card-title">审核历史</h5>
                                <p class="card-text">查看所有已完成的审核记录，支持按类型和状态筛选。</p>
                                <a href="/review/list/" class="btn btn-secondary">查看历史</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-4">
                        <div class="card text-white bg-warning" style="cursor: pointer;" onclick="window.location.href='/review/list/?status=pending'">
                            <div class="card-body">
                                <h5 class="card-title">待审核</h5>
                                <h2 id="pendingCount">-</h2>
                                <p class="card-text">需要尽快处理的申请</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card text-white bg-success" style="cursor: pointer;" onclick="window.location.href='/review/list/?status=approved'">
                            <div class="card-body">
                                <h5 class="card-title">已通过</h5>
                                <h2 id="approvedCount">-</h2>
                                <p class="card-text">已审核通过的申请</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card text-white bg-danger" style="cursor: pointer;" onclick="window.location.href='/review/list/?status=rejected'">
                            <div class="card-body">
                                <h5 class="card-title">已拒绝</h5>
                                <h2 id="rejectedCount">-</h2>
                                <p class="card-text">不符合要求的申请</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">审核流程说明</h5>
                            </div>
                            <div class="card-body">
                                <ol>
                                    <li><strong>提交申请</strong> - 用户或车主在个人中心提交资质申请</li>
                                    <li><strong>生成记录</strong> - 系统自动生成待审核记录</li>
                                    <li><strong>审核处理</strong> - 管理员在待审核列表中查看并处理申请</li>
                                    <li><strong>结果通知</strong> - 系统自动向申请人发送审核结果通知</li>
                                    <li><strong>状态更新</strong> - 审核通过后，用户或车辆获得相应权限</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script>
        // 初始化图标
        document.addEventListener('DOMContentLoaded', function() {
            feather.replace();
            
            // 获取统计信息
            fetchStats();
        });
        
        // 获取统计信息
        function fetchStats() {
            // 获取待审核数量
            fetch('/api/admin/review/pending/')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('pendingCount').textContent = data.count || 0;
                })
                .catch(error => {
                    console.error('获取待审核数量失败:', error);
                    document.getElementById('pendingCount').textContent = '错误';
                });
            
            // 获取总的统计信息
            fetch('/api/admin/review/history/')
                .then(response => response.json())
                .then(data => {
                    const stats = {
                        approved: 0,
                        rejected: 0
                    };
                    
                    if (data.results) {
                        data.results.forEach(review => {
                            if (review.status === 'approved') stats.approved++;
                            else if (review.status === 'rejected') stats.rejected++;
                        });
                        
                        document.getElementById('approvedCount').textContent = stats.approved;
                        document.getElementById('rejectedCount').textContent = stats.rejected;
                    }
                })
                .catch(error => {
                    console.error('获取统计信息失败:', error);
                });
        }
    </script>
</body>
</html>